<!-- eslint-disable vue/attributes-order -->
<template>
  <div class="app-container">
    <div class="filter-container">
      <label style="color:#909399;font-weight:500;">作业编号:  </label>
      
      <el-input
        v-model="queryParams.name"
        :placeholder="text"
        class="filter-item search-item"
      />
      <label style="color:#909399;font-weight:500;">司机名称:  </label>
      
      <el-input
        v-model="queryParams.username"
        :placeholder="text"
        class="filter-item search-item"
      />
<label style="color:#909399;font-weight:500;">运输任务编号:  </label>

      <el-input
        v-model="queryParams.username"
        :placeholder="text"
        class="filter-item search-item"
      />
      <label style="color:#909399;font-weight:500;">任务状态12:  </label>
      <el-select v-model="queryParams.truckTypeId" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-button
        style="background-color: #E05635;color: #fff;border-radius: 5px;border-color: #DCDFE6;"
        @click="search"
      >{{ $t('table.search') }}</el-button>
      <el-button
        style="background-color: #fff;color: #606266;;border-radius:5px;border-color: #DCDFE6;"
        @click="reset"
      >{{ $t('table.reset') }}</el-button>
    </div>
    <el-card shadow="never" style="margin-top: 10px;">
      <el-button
        style="background-color: #E05635;color: #fff;border-radius: 5px;border-color: #DCDFE6;"
        @click="addGoodsType"
      >+新增货物类型</el-button>

      <el-table
        :key="tableKey"
        ref="table"
        v-loading="loading"
        :data="tableData.items"
        :header-cell-style="{background:'#FCFBFF',border:'0'}"
        fit
        style="width: 100%;"
        @selection-change="onSelectChange"
        @sort-change="sortChange"
      >
        <el-table-column :label="$t('Driveroperation.id')" prop="id" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('Driveroperation.zybh')"
          :show-overflow-tooltip="true"
          align="center"
          prop="name"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.taskTransport.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('Driveroperation.username')"
          :show-overflow-tooltip="true"
          align="center"
          prop="driver"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.driver.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('Driveroperation.agency')"
          align="center"
          prop="agency"
        >
        </el-table-column>
        <el-table-column :label="$t('Driveroperation.licensePlate')" align="center" prop="licensePlate">
        </el-table-column>
        <el-table-column
          :label="$t('Driveroperation.planDepartureTime')"
          align="center"
          prop="planDepartureTime"
        >
        </el-table-column>
        <el-table-column
          :label="$t('Driveroperation.actualDepartureTime')"
          align="center"
          prop="actualDepartureTime"
        >
        </el-table-column>
        <!-- <el-table-column
          :label="$t('table.operation')"
          align="center"
          class-name="small-padding fixed-width"
          width="100px"
        >
          <template slot-scope="{row}">
            <i style="color: #009EFF;" @click="edit(row)">修改</i>
            <el-divider direction="vertical"></el-divider>
            <i
              style="color: #E05635;"
              @click="singleDelete(row)"
            >删除</i>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination
        v-show="tableData.counts>0"
        :limit.sync="pagination.size"
        :page.sync="pagination.current"
        :total="Number(tableData.counts)"
        @pagination="fetch"
      />
      <goods-type-edit
        ref="edit"
        :dialog-visible="dialog.isVisible"
        :type="dialog.type"
        @close="editClose"
        @success="editSuccess"
      />
    </el-card>
  </div>
</template>

<script>
import goodsType from '@/api/Driveroperation.js'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
//  import Pagination from '@/components/Pagination'

export default {
    name: 'GoodsManage',
    // components: {Pagination},
    data() {
        return {
          text: "请输入",
            queryParams: {},
            options: [],
            tableKey: 0,
            loading: false,
            tableData: {
              counts: 0
            },
            pagination: {
                    size: 10,
                    current: 1
            },
            dialog: {
                    isVisible: false,
                    type: 'add'
            }
        }
    },
    created(){
      this.fetch()
    },
    //页面初始化完成之后再对dom节点进行操作
    mounted(){
      //this.getOptions()
    },
    methods: {
      getOptions(){
        goodsType.get({ids: null}).then(response => {
          this.options = response.data
          console.log(this.options)
        })
      },
      fetch(params={}) {
      this.loading = true
      params.pageSize = this.pagination.size
      params.page = this.pagination.current
      goodsType.page(params).then(response => {
        console.log(response.data)
        const res = response.data
        this.loading = false
        if (res.isError) {
          return
        }
        this.tableData = res
      })
    },
     onSelectChange(selection) {
      this.selection = selection
    },
     sortChange(val) {
      this.sort.field = val.prop
      this.sort.order = val.order
      this.search()
    },
    search() {
      this.fetch({
        ...this.queryParams
      })
    },
    reset() {
      this.queryParams = {}
      this.sort = {}
      this.$refs.table.clearSort()
      this.$refs.table.clearFilter()
      this.search()
    },
    addGoodsType(){
      this.dialog.type = 'add'
      this.dialog.isVisible = true
      this.$refs.edit.setStation(false, this.options)
    },
    editClose() {
      this.dialog.isVisible = false
    },
    editSuccess() {
      this.search()
    },
    edit(row) {
      this.$refs.edit.setStation(row, this.options)
      this.dialog.type = 'edit'
      this.dialog.isVisible = true
    }
    }
}
</script>

<style lang="scss">
.el-table {
  border: 1px solid #f7f6f9;
}
.el-table tr,
.el-table td {
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #f7f6f9;
}
</style>
